<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="cw" uri="/widget-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<cw:base />
		<script>
			function onEnable() {
				Ext.getCmp('sex3').childItems.each(function(item){
		            item.enable();
		        });
		    }
		  function onDisable() {
				Ext.getCmp('sex3').childItems.each(function(item){
		            item.disable();
		        });
		    }
	</script>
	</head>
	<body>
		<cw:form>
			<ul>
				<li>
					<b> 单选输入域，通过type=radio渲染成单选，通过checkboxGroup设置一组单选 </b>
				</li>
				<li>
					<b> 选择项的数据可以是本地数据也可以是远程加载数据，远程数据需要设置url </b>
				</li>
				<li>
					<b> 以下示例分别展现了单选框的数据加载及显示和隐藏等常用操作 </b>
				</li>
			</ul>
			<br />
			<br />
			<ul>
				<li>
					本地数据单选框，设置type为radio，包含checkbox标签（子选项不需要设置type，默认为父标签的type）
					<table>
						<tr>
							<td align="right">
								性别：
							</td>
							<td>
								<cw:checkboxGroup property="sex" type="radio">
									<cw:checkbox text="男" inputValue="0" />
									<cw:checkbox text="女" inputValue="1" />
								</cw:checkboxGroup>
							</td>
						</tr>
					</table>
					<br />
				</li>
				<li>
					本地数据单选框，设置type为radio，选项数据来源通过dataFields和data设置，dataFields为数据字段名称，data为数据值
					<table>
						<tr>
							<td align="right">
								性别：
							</td>
							<td>
								<cw:checkboxGroup property="sex2" type="radio" displayField="name" valueField="name"
									dataFields="['name','checked','disabled']" data="[['男',true],['女',false,true]]">
								</cw:checkboxGroup>
							</td>
						</tr>
					</table>
					<br />
				</li>
				<li>
					远程数据单选框，设置type为radio，设置url为远程加载URL
					<table>
						<tr>
							<td align="right">
								性别：
							</td>
							<td>
								<cw:checkboxGroup id="sex3" property="sex3" type="radio" displayField="name" valueField="name" url="radio.json">
								</cw:checkboxGroup>
							</td>
						</tr>
					</table>
					<br />
				</li>
				<li>
					单选框控制，禁用/启用第三组的所有选项
					<table>
						<tr>
							<td>
								<cw:button text="启用" onclick="onEnable()"></cw:button>
							</td>
							<td>
								<cw:button text="禁用" onclick="onDisable()"></cw:button>
							</td>
						</tr>
					</table>
					<br />
				</li>
			</ul>
		</cw:form>
	</body>
</html>
